import React, {Component} from 'react';
import {ScrollView} from 'react-native';
import moment from 'moment';
// import * as LightDate from 'light-date';
import {
  DateTimePicker,
  DateTimePickerProps,
  DateTimePickerMode,
  View,
  Text,
  Switch,
  Colors,
} from 'react-native-ui-lib';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {TestSuite, TestCase} from '@rnoh/testerino';

interface State {
  mode: DateTimePickerMode;
  dateTimeFormatter: 'moment' | 'light-date';
}

class DateTimePickerScreen extends Component<{}, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      mode: 'time',
      dateTimeFormatter: 'moment',
    };
  }

  getCustomInputValue = (value?: string) => {
    if (!value) {
      return 'Default';
    }
    return value.includes((new Date().getFullYear() + 1).toString())
      ? 'Next Year'
      : value;
  };

  renderCustomInput: DateTimePickerProps['renderInput'] = ({value}) => {
    return (
      <View flex row spread>
        <Text>Valid from</Text>
        <Text absR $textPrimary text80BO>
          {this.getCustomInputValue(value)}
        </Text>
      </View>
    );
  };

  toggleTimeOrDate = () => {
    this.setState({mode: this.state.mode === 'time' ? 'date' : 'time'});
  };

  toggleFormatter = () => {
    this.setState({
      dateTimeFormatter:
        this.state.dateTimeFormatter === 'moment' ? 'light-date' : 'moment',
    });
  };

  getFormatter = (): DateTimePickerProps['dateTimeFormatter'] => {
    const {dateTimeFormatter} = this.state;
    if (dateTimeFormatter === 'moment') {
      return (value: Date, mode: DateTimePickerMode) => moment(value).format(mode === 'date' ? 'MMM D, YYYY' : 'h:mm A');
    } else {
      return (value: Date, mode: DateTimePickerMode) => value.toString();
      // LightDate.format(value, mode === 'date' ? '{mm}-{dd}-{yyyy}' : '{HH}:{mm}');
    }
  };

  render() {
    const {mode, dateTimeFormatter} = this.state;
    return (
      <ScrollView>
        <TestSuite name="DateTimePicker">
          <TestCase itShould="">
            <View padding-page>
              <Text text40>Date Time Picker</Text>
              <DateTimePicker
                // migrateDialog
                containerStyle={{marginVertical: 20}}
                label={'Date'}
                placeholder={'Select a date'}
                value={new Date('2015-03-25T12:00:00-06:30')}
              />
              <DateTimePicker
                // migrateDialog
                mode={'time'}
                label={'Time'}
                placeholder={'Select time'}
                value={new Date('2015-03-25T12:00:00-06:30')}
              />

              <Text text60R marginT-40>
                Disabled
              </Text>
              <DateTimePicker
                // migrateDialog
                containerStyle={{marginBottom: 20}}
                editable={false}
                label={'Date'}
                placeholder={'Select a date'}
              />
              <DateTimePicker
                // migrateDialog
                editable={false}
                mode={'time'}
                label={'Time'}
                placeholder={'Select time'}
                value={new Date('2015-03-25T12:00:00-06:30')}
              />
              <Text text60R marginT-40>
                Custom Input
              </Text>
              <View row marginV-20 centerV spread>
                <View row>
                  <Text text80>{mode}</Text>
                  <Switch
                    value={mode === 'time'}
                    onValueChange={this.toggleTimeOrDate}
                    marginL-10
                  />
                </View>
                <View row>
                  <Text text80>{dateTimeFormatter}</Text>
                  <Switch
                    value={dateTimeFormatter === 'moment'}
                    onValueChange={this.toggleFormatter}
                    marginL-10
                  />
                </View>
              </View>
              <DateTimePicker
                // migrateDialog
                containerStyle={{marginVertical: 20}}
                renderInput={this.renderCustomInput}
                mode={mode}
                dateTimeFormatter={this.getFormatter()}
                // value={new Date('2015-03-25T12:00:00-06:30')}
              />
              
              <Text text60R marginT-40>
                BackgroundColor
              </Text>
              <DateTimePicker
                mode={'time'}
                label={'Time'}
                placeholder={'Select time'}
                value={new Date('2015-03-25T12:00:00-06:30')}
                backgroundColor="#e40000ff"
              />
            </View>
          </TestCase>
        </TestSuite>
      </ScrollView>
    );
  }
}

export default gestureHandlerRootHOC(DateTimePickerScreen);
